<template>
  <!--海报保存 wwl -->
  <view class="page">
    <image :src="img" mode="scaleToFill" class="image" :style="{height:`${imageHeight*2}rpx`}"></image>
    <r-canvas ref="rCanvas"></r-canvas>
    <view class="message" v-if='message'>
      {{message}}
    </view>
  </view>
</template>

<script>
  import rCanvas from "@/components/r-canvas/r-canvas.vue"
  import {getMyPosterCode} from './static/api.js'
  export default {
    components:{rCanvas},
    data() {
      return {
        duan_type:1,// 1 app 2 小程序
        imgBgc: '',
        img: '',
        imageUrl: '',
        message: '',
        imageWidth: 300,
        imageHeight: 300,
      }
    },
    async onReady() {
      await this.getCode()
		uni.showLoading()
      uni.getImageInfo({
        src: this.imgBgc,
		fail:()=>{
			uni.hideLoading()
		},
        success: async (image) => {
          var imageProportion = (image.height / image.width).toFixed(2)
          this.imageWidth = 350
          this.imageHeight = Number((350 * imageProportion).toFixed(2))
          var _this = this
          var imageHeight = _this.imageHeight
          if (_this.imageHeight < 100) imageHeight = 100
          this.$nextTick(async () => {
            // 初始化
            await this.$refs.rCanvas.init({
              canvas_id: "rCanvas",
              hidden:true,
              canvas_width: _this.imageWidth,//canvas width px
              canvas_height:imageHeight, //canvas height px
            })
            await this.$refs.rCanvas.setCanvasHeight(imageHeight)
            await this.$refs.rCanvas.setCanvasWidth(_this.imageWidth)
            //画图
            await this.$refs.rCanvas.drawImage({
              url: _this.imgBgc,
              // url:'static/img/decoratePower.png',
              x: 0,
              y: 0,
              w: _this.imageWidth,
              h: _this.imageHeight
            })
            //画图
            await this.$refs.rCanvas.drawImage({
              url: _this.imageUrl,
              x: 140,
              y: _this.imageHeight - 110,
              w: 80,
              h: 91
            })
            await this.$refs.rCanvas.ctx
            // 生成海报
            await this.$refs.rCanvas.draw((res) => {
              this.img = res.tempFilePath
			uni.hideLoading()
              this.onSave()
            })
          })

        }
      })
    },
    methods: {
      onSave() {
        var _this = this
        //#ifndef H5
        uni.saveImageToPhotosAlbum({
          filePath: _this.img,
          success(res) {
            wx.hideLoading()
            _this.message = '已为您保存到相册，快去分享吧~'
            uni.showToast({
              title: "已为您保存到相册，快去分享吧~",
              duration: 2000,
              icon: "none"
            })
          },
          fail() {
            _this.message = ''
            uni.showToast({
              title: "保存失败",
              duration: 2000,
              icon: "none"
            })
            wx.hideLoading()
          }
        })
        //#endif
      },
      async getCode() {
		  uni.showLoading()
        var res =  await getMyPosterCode({duan_type:this.duan_type})
		 uni.hideLoading()
        this.imageUrl = res
      }
    },
    onLoad(params) {
      this.imgBgc = decodeURIComponent(params.img)
      //#ifdef APP-PLUS
      this.duan_type = 1 
      //#endif
      //#ifdef MP-WEIXIN
      this.duan_type = 2
      //#endif
    },
  }
</script>

<style lang="scss">
  page {
    background-color: #fff;
  }

  .page {
    position: relative;
    padding: 20rpx 38rpx;
    width: 100%;
    box-sizing: border-box;
  }

  .image {
    // width: 674rpx;
    width:100%;
	height: 600rpx;
  }
  .message{
    color:#D5D5D5;
    font-size: 24rpx;
    line-height: 34rpx;
    margin-top: 84rpx;
    text-align: center;
  }
</style>
